<template>
	<view class="container">

		<view class="header">
			<view class="account-info">
				<view class="cur-title">
					<image src="@/static/user-tag.png" mode="widthFix"></image>
					<view class="hdgz" @click="clickRule">
						<uni-icons type="info" size="12" color="#FFFFFF" style="margin-right:2px;"></uni-icons>
						活动规则
					</view>
				</view>
			</view>
			<view class="userInfo" @click="editUser" v-if="openid">
				<view class="avatar">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<image v-if="userInfo.level" class="level" src="../../static/my_top_vip@2x.png" mode=""></image>
				</view>
				<view>
					<view class="name">{{ userInfo.nick_name }}</view>
					<view class="tips">{{ userInfo.id }} {{ userInfo.mobile }}</view>
				</view>

			</view>
			<view class="userInfo" v-else>
				<view @click="getCode" class="login-btn">
					<view>立即登录</view>
				</view>
			</view>
			<view class="card-group" v-if="openid">
				<view class="item">
					<view class="num">{{ userInfo.order_num || 0 }}</view>
					<view class="title">回收物品</view>
				</view>
				<view class="item">
					<view class="num">{{ userInfo.integral || 0 }}</view>
					<view class="title">积分</view>
				</view>
				<view class="item">
					<view class="num">{{ userInfo.invite_count || 0 }}</view>
					<view class="title">邀请人数</view>
				</view>
				<view class="item">
					<view class="num">{{ userInfo.balance || 0 }}</view>
					<view class="title">余额</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="flex-between">
				<view class="title">我的订单</view>
				<navigator url="../order/order" hover-class="none" class="flex">全部<u-icon name="arrow-right"
						color="#999999"></u-icon></navigator>
			</view>
			<view class="list">
				<view class="item" v-for="item in orders" :key="item.id" @click="goOrder(item.id)">
					<image :src="item.icon" mode=""></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="flex-between">
				<view class="title">我的订单</view>
				<navigator url="../order/order" hover-class="none" class="flex">全部<u-icon name="arrow-right"
						color="#999999"></u-icon></navigator>
			</view>
			<view class="list">
				<view class="item" v-for="item in shopOrders" :key="item.id" @click="goShopOrder(item.id)">
					<image :src="item.icon" mode=""></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="banner px-30 mt-20">
			<u-swiper @click="goBanner" height="164rpx" keyName="image" indicator circular
				:list="bannerList"></u-swiper>
		</view>
		<view class="tool-list">
			<view class="title">常用工具</view>
			<view class="flex">
				<view class="item" v-for="(item, index) in tools" :key="index" @click="goDetail(item.url)">
					<block v-if="item.show">
						<block v-if="item.statusFlag">
							<view v-if="item.status == 1" class="tip"></view>
						</block>
						<image :src="item.icon" mode=""></image>
						<view>{{ item.title }}</view>
					</block>
				</view>
			</view>
		</view>
		<orderStatus :show="show" @closePopup="closePopup"></orderStatus>
	</view>
</template>

<script>
	import orderStatus from '../../components/onTakeOrder/onTakeOrder.vue';
	export default {
		components: {
			orderStatus
		},
		data() {
			return {
				bgColor: 'transparent',
				show: false,
				openid: '',
				userInfo: {},
				orders: [{
						id: 0,
						icon: require('../../static/order-1.png'),
						title: '全部',
					},
					{
						id: 1,
						icon: require('../../static/order-2.png'),
						title: '待服务',
					},
					{
						id: 2,
						icon: require('../../static/order-3.png'),
						title: '服务中',
					},
					{
						id: 3,
						icon: require('../../static/order-4.png'),
						title: '待评价',
					},
					{
						id: 4,
						icon: require('../../static/order-5.png'),
						title: '已完成',
					}
				],
				shopOrders: [{
						id: 0,
						icon: require('../../static/order-1.png'),
						title: '全部',
					},
					{
						id: 1,
						icon: require('../../static/order-2.png'),
						title: '待服务',
					},
					{
						id: 2,
						icon: require('../../static/order-3.png'),
						title: '服务中',
					},
					{
						id: 3,
						icon: require('../../static/order-4.png'),
						title: '待评价',
					},
					{
						id: 4,
						icon: require('../../static/order-5.png'),
						title: '已完成',
					}
				],
				tools: [{
						url: '../statistics/statistics',
						icon: require('../../static/tools-1.png'),
						title: '账户统计',
						show: true
					},
					{
						url: '../address/address',
						icon: require('../../static/tools-2.png'),
						title: '地址管理',
						show: true
					},
					{
						url: '../feedback/feedback',
						icon: require('../../static/tools-3.png'),
						title: '意见反馈',
						show: true
					},
					{
						url: '../notice/notice',
						icon: require('../../static/tools-7.png'),
						title: '消息通知',
						status: 0,
						statusFlag: 1,
						show: true
					},
					{
						url: '../vip/vip',
						icon: require('../../static/vip.png'),
						title: '会员入驻',
						status: 0,
						show: true
					},
					{
						url: '../myInvition/myInvition',
						icon: require('../../static/tools-6.png'),
						title: '推广中心',
						show: false
					},
					{
						url: '../completeInfo/completeInfo',
						icon: require('../../static/tools-8.png'),
						title: '完善资料',
						show: false
					}
				],
				bannerList: [],
				user_id: ''
			};
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		onLoad(e) {
			this.openid = uni.getStorageSync('openid');
			this.getBanner();
			if (e.scene) {
				this.user_id = e.scene;
				uni.setStorageSync('invition_id', this.user_id);
			}
		},
		onShow() {
			this.getUserInfo();
			this.getNoticeStatus();
			this.$api
				.orderov({
					openid: uni.getStorageSync('openid')
				})
				.then(res => {
					if (res.code == 1) {
						if (res.data.status == 1) {
							this.show = true;
						}
					}
				});
			if (uni.getStorageSync('invition_id')) {
				this.user_id = uni.getStorageSync('invition_id');
			}
		},
		methods: {
			closePopup() {
				this.show = false;
			},
			goOrder(id) {
				if (!uni.getStorageSync('openid')) {
					this.$tools.toast('请先登录');
					return;
				}
				uni.navigateTo({
					url: '../order/order?status=' + id
				});
			},
			goShopOrder(id) {
				if (!uni.getStorageSync('openid')) {
					this.$tools.toast('请先登录');
					return;
				}
				uni.navigateTo({
					url: '../order/order-shop?status=' + id
				});
			},
			goBanner(e) {
				let url = this.bannerList[e].url;
				uni.navigateTo({
					url,
					fail: () => {
						uni.switchTab({
							url
						});
					}
				});
			},
			goDetail(url) {
				if (!uni.getStorageSync('openid')) {
					this.$tools.toast('请先登录');
					return;
				}
				uni.navigateTo({
					url
				});
			},
			editUser() {
				uni.navigateTo({
					url: '../editUser/editUser'
				});
			},
			getBanner() {
				this.$api.banner().then(res => {
					this.bannerList = res.data;
				});
			},
			getNoticeStatus() {
				this.$api
					.noticeStatus({
						openid: this.openid
					})
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							this.tools[3].status = res.data;
						}
					});
			},
			getCode() {
				uni.login({
					provider: 'weixin', //使用微信登录
					onlyAuthorize: true,
					success: res => {
						// const res = {
						// 	code: res.code
						// }
						this.$api
							.getOpenid({
								code: res.code,
								user_id: this.user_id
							})
							.then(res1 => {
								// this.openid  = res
								if (res1.code == 0) {
									console.log(res1);
									this.openid = res1.data.openid;
									uni.setStorageSync('openid', this.openid);
									this.$api
										.setUserInfo({
											openid: this.openid,
											platform: "wxmini"
										})
										.then(res => {
											if (res.code == 0) {
												uni.setStorageSync('token', res.data.token);
												this.getUserInfo();
											} else {
												this.$tools.toast('登录失败，请稍后重试');
											}
										});
								} else {
									this.$tools.toast('登录失败，请稍后重试');
								}
							});
					}
				});
				return;
			},
			getUserInfo() {
				this.$api
					.getUserInfo()
					.then(res => {
						this.userInfo = res.data.data;
						if (this.userInfo.status == 0) {
							this.tools[5].show = true;
							this.tools[6].show = true;
						}
						uni.setStorageSync('userInfo', this.userInfo);
					});
			},
			clickRule() {

			}
		}
	};
</script>

<style lang="scss">
	.container {
		background: url("../../static/home_img_bg@2x.png") no-repeat;
		background-size: contain;
	}

	.account-info {
		padding: 40rpx 20rpx;

		.cur-title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 38%;
			}

			.hdgz {
				color: #FFFFFF;
				display: flex;
				align-items: center;
			}
		}

		.sm-font {
			font-size: $uni-font-size-sm;
		}
	}

	.header {

		padding-top: var(--status-bar-height);
	}

	.userInfo {
		padding: 0px 30upx 0;
		border-radius: 12upx 12upx 0px 0px;
		height: 160upx;
		display: flex;
		align-items: center;

		.avatar {
			width: 130upx;
			height: 130upx;
			border-radius: 100%;
			position: relative;

			.level {
				width: 32upx;
				height: 32upx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.name {
			margin-left: 28upx;
			font-size: 36upx;
			font-weight: 500;
			color: #ffffff;
		}

		.tips {
			margin-left: 28upx;
			color: #ffffff;
		}

		.login-btn {
			text-align: center;
			width: 316upx;
			height: 88upx;
			background: #E9FFF0;
			border-radius: 88upx;
			border: 2upx solid #9EE3C3;
			padding: 6upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: auto;

			view {
				color: #fff;
				background: #3BB061;
				width: 100%;
				height: 100%;
				border-radius: 88upx;
				line-height: 88upx;
			}
		}
	}


	.card-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;

		.item {
			padding-bottom: 38upx;
			border-radius: 12upx;
			text-align: center;

			.num {
				font-size: 42upx;
				font-weight: bold;
				color: #eeeeee;
				line-height: 1;
				margin-top: 20upx;
			}

			.title {
				font-size: 24upx;
				font-weight: 500;
				color: #ffffff;
				line-height: 1;
				margin-top: 20upx;
			}
		}
	}

	.order {
		background: rgba(255, 255, 255, .7);
		box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
		border-radius: 16upx;
		margin: 30upx;

		.title {
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
			padding: 42upx 32upx 46upx;
		}

		.flex {
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
			margin-right: 32upx;
		}

		.list {
			@include menu-list(5);
			padding-bottom: 30upx;

			.item {
				image {
					width: 52upx;
					height: 52upx;
				}

				view {
					font-size: 26upx;
					color: #666666;
					margin-top: 10upx;
				}
			}
		}
	}

	.banner {
		margin: 20upx 0;

		image {
			width: 100%;
			height: 164upx;
		}
	}

	.tool-list {
		background: rgba(255, 255, 255, .7);
		box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
		border-radius: 16upx;
		margin: 30upx;

		.title {
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
			padding: 42upx 32upx 46upx;
		}

		.flex {
			flex-wrap: wrap;
		}

		.item {
			width: 25%;
			text-align: center;
			margin-bottom: 60upx;
			font-size: 28upx;
			font-weight: 400;
			color: #222222;
			position: relative;

			.tip {
				position: absolute;
				right: 60upx;
				top: 0;
				z-index: 100;
				width: 20upx;
				height: 20upx;
				border-radius: 100%;
				background: $color-error;
			}

			image {
				width: 60upx;
				height: 60upx;
				margin-bottom: 10upx;
			}
		}
	}
</style>